<template>
<div style="padding:10px 20px;">
  <yd-flexbox style="align-items: flex-start;">
    <div>
      <div class="headimg">
        <img :src="outdata.headimgurl" alt="">
      </div>
    </div>
    <yd-flexbox-item>
      <div class="nickname">
        <div class="name">{{outdata.nickname}}<div style="float:right;color:#999999;font-size:12px">{{outdata.create_time}}</div></div>
        <div class="star">打分 &nbsp;<yd-rate slot="right" v-model="outdata.score" size="16px" readonly="readonly" style="float:right;"></yd-rate></div>
        <div class="zongpingjia">口味:非常好   环境:非常好   服务:非常好</div>
      </div>
      <div class="speakbody" v-html="outdata.content">

      </div>
      <div class="imgbody" v-if="imglist">
        <yd-lightbox :num="imglist.length">
            <yd-lightbox-img v-for="(item, index) in imglist" :key="index" :src="item" class="imglist"></yd-lightbox-img>
        </yd-lightbox>
      </div>
      <div class="qita">
        <span style="color:#999999;float:left;">浏览 {{outdata.see}}</span><div class="rightbtn"><hd-svg-icon name="hd-zan2" size="15px" color="#bbbbbb" class=""></hd-svg-icon>喜欢</div>
      </div>
    </yd-flexbox-item>
  </yd-flexbox>
</div>
</template>

<script>
export default {
  data () {
    return {
      rate1: 3,
      outdata: '',
      readonly: true,
      imglist: []
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.getCommentInfo,
        data: {
          id: this.$route.query.id
        },
        success: (resultData) => {
          this.outdata = resultData.data;
          if (resultData.data.image) {
            this.imglist = resultData.data.image.split(',');
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.headimg img{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.nickname{
  float: left;
  min-height: 75px;
  width: 100%;
  padding-left: 10px;
}
.name{
  float: left;
  width: 100%;
  height: 25px;
  font-size: 18px;
  line-height: 25px;
  color: #4d667c;
  overflow:hidden;
  white-space: nowrap;
  text-overflow:ellipsis; 
}
.star{
  float: left;
  height: 25px;
  line-height: 25px;
  font-size: 10px;
}
.zongpingjia{
  color: #999999;
  font-size: 10px;
  float: left;
  width: 100%;
  height: 25px;
  line-height: 25px;
}
.speakbody{
  margin-top: 10px;
  float: left;
  width: 100%;
  min-height: 20px;
  padding-bottom: 15px;
  padding-left: 10px;
}
.imgbody{
  float: left;
  width: 100%;
  min-height: 0px;
  padding-bottom: 10px;
  padding-left: 10px;
  /* height: 4.5rem; */
  overflow-y: hidden;
}
.imglist{
  float: left;
  width: 33%;
  height: 1.5rem;
  padding: 3px;
  overflow: hidden;
}
.imglist img{
  width: 100%;
  height: 1.4rem;
}
.qita{
  float: left;
  width: 100%;
  height: 25px;
  line-height: 25px;
  padding-left: 10px;
}
.rightbtn{
  float: right;
  width: 60px;
  text-align: center;
  line-height: 20px;
  height: 20px;
  margin-right: 10px;
  font-size: 10px;
}
</style>
